<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.nickName"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入昵称"
      />
      <el-input
        v-model="listQuery.mobile"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入手机号"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找
      </el-button>

      <!-- <el-button
        v-permission="['POST /admin/doctor/create']"
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleAddDrug"
      >添加
      </el-button> -->

    </div>

    <!-- 查询结果 -->
    <el-table
      :header-cell-style="{background:'#f5f5f5',color:'#333333',height:'50px'}"
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column
        width="140"
        align="center"
        label="ID"
        prop="id"
        sortable
      />

      <el-table-column align="center" label="名称" prop="username"/>
      <!--
      <el-table-column align="center" label="性别" prop="gender" width="140">

        <template slot-scope="scope">
          <el-tag v-if="scope.row.gender === 1">男</el-tag>
          <el-tag v-else-if="scope.row.gender === 2">女</el-tag>
          <el-tag v-else>不限</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="等级" prop="userLevel" width="140">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.userLevel === 0" type="success">普通用户</el-tag>
          <el-tag v-else-if="scope.row.userLevel === 1" type="warning">vip用户</el-tag>
          <el-tag v-else-if="scope.row.userLevel === 2" type="danger">高级vip用户</el-tag>

        </template>
      </el-table-column>-->
      <el-table-column align="center" label="昵称" prop="nickname"/>
      <el-table-column align="center" label="手机号" prop="mobile"/>
      <!-- <el-table-column align="center" label="头像" prop="avatar"/> -->
      <el-table-column align="center" label="头像" prop="avatar">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" width="40">
        </template>
      </el-table-column>
      <el-table-column align="center" label="使用到期" prop="vipEndDate"/>
      <el-table-column align="center" label="最后登录" prop="lastLoginTime"/>
      <el-table-column align="center" label="创建时间" prop="createTime"/>
      <el-table-column align="center" label="更新时间" prop="updateTime"/>
    </el-table>

    <!-- 分页对象 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<style scoped>

</style>
<script>
  import { userList } from '@/api/user'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'User',
    components: { Pagination },
    data() {
      return {
        listLoading: true,
        dialogVisible: false,
        dialogContent: '',
        listQuery: {
          pageNum: 1,
          nickName: undefined,
          mobile: undefined,
          pageSize: 20
        },
        total: 0,
        list: [],
        formLabelWidth: '120px',
        dialogFormVisible: false,
        dialogStatus: '',
        dialogName: ''
      }
    },

    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        userList(this.listQuery)
          .then((response) => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter() {
        this.listQuery.pageNum = 1
        this.getList()
      }
    }
  }
</script>
